<!--
  Copyright [2025] [OBARA (Nanjing) Electromechanical Co., Ltd]

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->


{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="OBARA Welding Gun Selection Database - Professional welding gun selection tool">
    <title>{% block title %}OBARA Welding Gun Selection Database{% endblock %}</title>
	{% load static %}
    <link rel="icon" type="image/x-icon" href="{% static 'icon/Obara_logo.bmp' %}"> 
	
    <!-- ✅ Recommended: Use CDN1 (uncomment if using) 
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
	-->

    <!-- 📁 Use local resources -->
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/bootstrap-icons.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/all.min.css' %}">
    
    <!-- PDF.js library -->
    <script src="{% static 'js/pdf.min.js' %}"></script>
    
    <style>
        :root {
            --primary-color: #0066cc;
            --secondary-color: #f8f9fa;
            --accent-color: #ff6b35;
            --text-dark: #2c3e50;
            --text-light: #6c757d;
            --border-color: #dee2e6;
            --shadow: 0 2px 10px rgba(0,0,0,0.1);
            --shadow-hover: 0 4px 20px rgba(0,0,0,0.15);
        }
        
        [data-bs-theme="dark"] {
            --primary-color: #4dabf7;
            --secondary-color: #212529;
            --accent-color: #fd7e14;
            --text-dark: #f8f9fa;
            --text-light: #adb5bd;
            --border-color: #495057;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: var(--text-dark);
            background-color: var(--secondary-color);
        }
        
        .navbar-brand {
            font-weight: 700;
            font-size: 1.5rem;
            color: var(--primary-color) !important;
        }
        
        .navbar {
            box-shadow: var(--shadow);
            background: rgba(255, 255, 255, 0.95) !important;
            backdrop-filter: blur(10px);
        }
        
        [data-bs-theme="dark"] .navbar {
            background: rgba(33, 37, 41, 0.95) !important;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, var(--primary-color), #0052a3);
            border: none;
            border-radius: 8px;
            padding: 12px 24px;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: var(--shadow);
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-hover);
            background: linear-gradient(135deg, #0052a3, var(--primary-color));
        }
        
        .btn-outline-primary {
            border: 2px solid var(--primary-color);
            color: var(--primary-color);
            border-radius: 8px;
            padding: 10px 20px;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        
        .btn-outline-primary:hover {
            background: var(--primary-color);
            transform: translateY(-1px);
            box-shadow: var(--shadow);
        }
        
        .card {
            border: none;
            border-radius: 12px;
            box-shadow: var(--shadow);
            transition: all 0.3s ease;
            background: white;
        }
        
        [data-bs-theme="dark"] .card {
            background: #2c3034;
        }
        
        .card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-hover);
        }
        
        .card-header {
            background: linear-gradient(135deg, var(--primary-color), #0052a3);
            color: white;
            border-radius: 12px 12px 0 0 !important;
            border: none;
            padding: 1.5rem;
            font-weight: 600;
        }
        
        .form-control, .form-select {
            border: 2px solid var(--border-color);
            border-radius: 8px;
            padding: 12px 16px;
            transition: all 0.3s ease;
            background: white;
        }
        
        [data-bs-theme="dark"] .form-control,
        [data-bs-theme="dark"] .form-select {
            background: #2c3034;
            border-color: var(--border-color);
            color: var(--text-dark);
        }
        
        .form-control:focus, .form-select:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.2rem rgba(0, 102, 204, 0.25);
            transform: translateY(-1px);
        }
        
        .form-label {
            font-weight: 600;
            color: var(--text-dark);
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .table {
            border-radius: 12px;
            overflow: hidden;
            box-shadow: var(--shadow);
            background: white;
        }
        
        [data-bs-theme="dark"] .table {
            background: #2c3034;
        }
        
        .table thead th {
            background: linear-gradient(135deg, var(--primary-color), #0052a3);
            color: white;
            border: none;
            font-weight: 600;
            padding: 1rem;
        }
        
        .table tbody tr {
            transition: all 0.2s ease;
        }
        
        .table tbody tr:hover {
            background-color: rgba(0, 102, 204, 0.05);
            transform: scale(1.01);
        }
        
        .highlight-field {
            background: linear-gradient(135deg, #fff3cd, #ffeaa7);
            padding: 8px 12px;
            border-radius: 6px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }
        
        [data-bs-theme="dark"] .highlight-field {
            background: linear-gradient(135deg, #856404, #b08500);
            color: white;
        }
        
        .highlight-field:hover {
            background: linear-gradient(135deg, #ffeaa7, #fdcb6e);
            transform: scale(1.05);
            border-color: var(--accent-color);
        }
        
        .spinner-border {
            color: var(--primary-color);
        }
        
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.9);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            backdrop-filter: blur(5px);
        }
        
        [data-bs-theme="dark"] .loading-overlay {
            background: rgba(33, 37, 41, 0.9);
        }
        
        .alert {
            border: none;
            border-radius: 8px;
            padding: 1rem 1.5rem;
            margin-bottom: 1.5rem;
        }
        
        .alert-success {
            background: linear-gradient(135deg, #d4edda, #c3e6cb);
            color: #155724;
        }
        
        .alert-danger {
            background: linear-gradient(135deg, #f8d7da, #f5c6cb);
            color: #721c24;
        }
        
        .alert-warning {
            background: linear-gradient(135deg, #fff3cd, #ffeaa7);
            color: #856404;
        }
        
        .pagination .page-link {
            border: none;
            color: var(--primary-color);
            padding: 12px 16px;
            margin: 0 4px;
            border-radius: 8px;
            transition: all 0.3s ease;
        }
        
        .pagination .page-link:hover {
            background: var(--primary-color);
            color: white;
            transform: translateY(-2px);
            box-shadow: var(--shadow);
        }
        
        .pagination .page-item.active .page-link {
            background: var(--primary-color);
            border-color: var(--primary-color);
        }
        
        .badge {
            padding: 8px 12px;
            border-radius: 20px;
            font-weight: 600;
        }
        
        .theme-toggle {
            background: none;
            border: 2px solid var(--border-color);
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            color: var(--text-dark);
        }
        
        .theme-toggle:hover {
            border-color: var(--primary-color);
            color: var(--primary-color);
            transform: rotate(180deg);
        }
        
        .footer {
            background: linear-gradient(135deg, #2c3e50, #34495e);
            color: white;
            padding: 2rem 0;
            margin-top: 4rem;
        }
        
        .image-preview {
            max-width: 100px;
            max-height: 100px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid var(--border-color);
        }
        
        .image-preview:hover {
            transform: scale(1.1);
            border-color: var(--primary-color);
            box-shadow: var(--shadow);
        }
        
        .modal-content {
            border: none;
            border-radius: 12px;
            box-shadow: var(--shadow-hover);
        }
        
        .modal-header {
            background: linear-gradient(135deg, var(--primary-color), #0052a3);
            color: white;
            border-radius: 12px 12px 0 0;
            border: none;
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .fade-in-up {
            animation: fadeInUp 0.6s ease-out;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        
        .pulse {
            animation: pulse 2s infinite;
        }
        
        .search-form {
            background: white;
            border-radius: 12px;
            padding: 2rem;
            box-shadow: var(--shadow);
            margin-bottom: 2rem;
        }
        
        [data-bs-theme="dark"] .search-form {
            background: #2c3034;
        }
        
        .results-header {
            background: linear-gradient(135deg, var(--primary-color), #0052a3);
            color: white;
            padding: 1.5rem;
            border-radius: 12px;
            margin-bottom: 1.5rem;
        }
        
        .product-card {
            transition: all 0.3s ease;
            border: 1px solid var(--border-color);
        }
        
        .product-card:hover {
            border-color: var(--primary-color);
            box-shadow: var(--shadow-hover);
        }

        .language-toggle {
            background: none;
            border: 2px solid var(--border-color);
            border-radius: 8px;
            padding: 8px 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            color: var(--text-dark);
            text-decoration: none;
            font-weight: 600;
        }
        
        .language-toggle:hover {
            border-color: var(--primary-color);
            color: var(--primary-color);
            text-decoration: none;
        }
		
		.stats-card {
			background-color: #f8f9fa;
			color: #212529;
		}

		[data-bs-theme="dark"] .stats-card {
			background-color: #343a40;
			color: #f8f9fa;
		}

        /* User info card styles */
        .user-info-card {
            position: absolute;
            top: 100%;
            right: 0;
            width: 320px;
            background: white;
            border: none;
            border-radius: 12px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
            z-index: 1050;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: all 0.3s ease;
            margin-top: 8px;
        }

        [data-bs-theme="dark"] .user-info-card {
            background: #2c3034;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        }

        .user-info-card.show {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .user-info-card .card-header {
            background: linear-gradient(135deg, var(--primary-color), #0052a3);
            color: white;
            border-radius: 12px 12px 0 0;
            padding: 1rem 1.25rem;
            font-weight: 600;
            font-size: 0.95rem;
            border: none;
        }

        .user-info-card .card-body {
            padding: 1.25rem;
        }

        .user-info-card .info-item {
            display: flex;
            align-items: center;
            margin-bottom: 0.75rem;
            font-size: 0.875rem;
            line-height: 1.4;
        }

        .user-info-card .info-item:last-child {
            margin-bottom: 0;
        }

        .user-info-card .info-item i {
            color: var(--primary-color);
            width: 16px;
            flex-shrink: 0;
        }

        .user-info-card .label {
            font-weight: 600;
            color: var(--text-dark);
            min-width: 90px;
            flex-shrink: 0;
        }

        .user-info-card .info-item span:last-child {
            color: var(--text-light);
            flex: 1;
        }

        /* Responsive design */
        @media (max-width: 768px) {
            .user-info-card {
                width: 280px;
                right: -20px;
            }
        }
    </style>
    
    {% block extra_css %}{% endblock %}
</head>
<body>
    <!-- Navigation Bar -->
    <nav class="navbar navbar-expand-lg navbar-light fixed-top">
        <div class="container">
            <a class="navbar-brand" href="{% url 'clamps:home_en' %}">
                <i class="fas fa-industry me-2"></i>
                OBARA Welding Gun Selection Database
            </a>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    {% if user.is_authenticated %}
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'clamps:search_en' %}">
                            <i class="bi bi-search text-success me-1"></i>Product Search
                            </a>
                        </li>
                        {% if user.is_staff %}
                            <li class="nav-item">
                                <a class="nav-link" href="{% url 'clamps:management_dashboard' %}">
                                    <i class="bi bi-gear text-success me-1"></i>Management
                                </a>
                            </li>
                        {% endif %}
                    {% endif %}
                </ul>
                
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a href="javascript:void(0)" class="language-toggle me-3" onclick="switchLanguage()" title="Switch Language">
                            <i class="bi bi-translate me-1"></i>中文
                        </a>
                    </li>
                    <li class="nav-item">
                        <button class="theme-toggle me-3" onclick="toggleTheme()" title="Toggle Theme">
                            <i class="bi bi-sun-fill" id="theme-icon"></i>
                        </button>
                    </li>
                    {% if user.is_authenticated %}
                        <li class="nav-item position-relative">
                            <a class="nav-link" href="#" id="user-info-button">
                                <i class="bi bi-person-badge text-primary me-1"></i>{{ user.username }}
                            </a>
                            <!-- User info card -->
                            <div id="user-info-card" class="user-info-card">
                                <div class="card-header">
                                    <i class="bi bi-person-badge me-2"></i>User Information
                                </div>
                                <div class="card-body">
                                    <div class="info-item">
                                        <i class="bi bi-shield-check me-2"></i>
                                        <span class="label">Created by：</span>
                                        <span id="created-by">Loading...</span>
                                    </div>
                                    <div class="info-item">
                                        <i class="bi bi-clock me-2"></i>
                                        <span class="label">Password Expiry：</span>
                                        <span id="password-expiry">Loading...</span>
                                    </div>
                                    <div class="info-item">
                                        <i class="bi bi-download me-2"></i>
                                        <span class="label">Download Limit：</span>
                                        <span id="download-limit">Loading...</span>
                                    </div>
                                    <div class="info-item">
                                        <i class="bi bi-file-earmark me-2"></i>
                                        <span class="label">Today Downloaded：</span>
                                        <span id="daily-downloads">Loading...</span>
                                    </div>
                                    <div class="info-item">
                                        <i class="bi bi-hdd me-2"></i>
                                        <span class="label">Today Download Size：</span>
                                        <span id="daily-download-size">Loading...</span>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'clamps:logout_en' %}">
                                <i class="bi bi-box-arrow-in-right text-danger me-1"></i>Logout
                            </a>
                        </li>
                    {% else %}
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'clamps:login_en' %}">
                            <i class="bi bi-box-arrow-in-right text-success me-1"></i>Login
                        </a>
                            </a>
                        </li>
                    {% endif %}
                </ul>
            </div>
        </div>
    </nav>
    
    <!-- Main Content -->
    <main style="margin-top: 80px; min-height: calc(100vh - 160px);">
        <div class="container">
            <!-- Message Alerts -->
            {% if messages %}
                {% for message in messages %}
                    <div class="alert alert-dismissible fade show fade-in-up" role="alert" style="background-color: #e0f7fa; border: 1px solid #b2ebf2; border-radius: 8px; color: #2c3e50; padding: 12px 16px; margin-bottom: 16px;">
                        <i class="bi bi-info-circle me-2" style="color: #2c3e50;"></i>
                        {{ message }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" style="color: #2c3e50; opacity: 0.7;"></button>
                    </div>
                {% endfor %}
            {% endif %}
            
            {% block content %}{% endblock %}
        </div>
    </main>
    
    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h5><i class="fas fa-industry me-2"></i>OBARA (NANJING) Electromechanical Co., Ltd</h5>
                    <p class="mb-1">
                        <i class="bi bi-geo-alt me-2"></i>
                        No.28, Renjie Road, Jiangning District, Nanjing, China
                    </p>
					<p class="mb-1">
						<i class="bi bi-card-text me-2"></i>
						ICP Registration: Su ICP Bei 05020192-1
					</p>
                    <p class="mb-0">
                        <i class="bi bi-envelope me-2"></i>
                        Tech Dept Emai: gaoj@obara.com.cn
                    </p>
                </div>
                <div class="col-md-6 text-md-end">
					<br>
                    <p class="mb-1">Be customer-oriented care employees encourage innovations take in the fresh</p>
                    <p class="mb-0">
                        <small>Copyright © <span id="current-year">1994</span>-<span id="current-year-end"></span>  OBARA (NANJING) Electromechanical Co., Ltd</small>
                    </p>
					<br>
                </div>
            </div>
        </div>
    </footer>
    
    <!-- Bootstrap JS -->
	<!-- ✅ Recommended: Use CDN1 (uncomment if using) 
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
	-->
	
	 <!-- 📁 Use local resources -->
    <script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
    
    <script>
        // Theme toggle function
        function toggleTheme() {
            const html = document.documentElement;
            const themeIcon = document.getElementById('theme-icon');
            
            if (html.getAttribute('data-bs-theme') === 'dark') {
                html.setAttribute('data-bs-theme', 'light');
                themeIcon.className = 'bi bi-sun-fill';
                localStorage.setItem('theme', 'light');
            } else {
                html.setAttribute('data-bs-theme', 'dark');
                themeIcon.className = 'bi bi-moon-fill';
                localStorage.setItem('theme', 'dark');
            }
        }
        
        // **修正后的语言切换功能 (与base.html一致)**
    function switchLanguage() {
        const currentPath = window.location.pathname;
        let newPath = currentPath;

        // 定义中英文页面的URL映射关系
        const translatablePaths = [
            { zh: "/", en: "/_en/" },
            { zh: "/login/", en: "/login_en/" },
            { zh: "/search/", en: "/search_en/" },
            { zh: "/search/results/", en: "/search/results_en/" },
            // 使用正则表达式处理产品详情页
            { zh: /^\/product\/(\d+)\/$/, en: "/product/$1_en/" },
            { en: /^\/product\/(\d+)_en\/$/, zh: "/product/$1/" }
        ];

        // 判断当前是在中文页还是英文页
        const isEnglishPage = currentPath.includes('_en/') || translatablePaths.some(p => p.en instanceof RegExp && p.en.test(currentPath));

        if (isEnglishPage) {
            // 当前是英文页，目标是切换到中文
            for (const pathMap of translatablePaths) {
                if (typeof pathMap.en === 'string' && currentPath === pathMap.en) {
                    newPath = pathMap.zh;
                    break;
                } else if (pathMap.en instanceof RegExp && pathMap.en.test(currentPath)) {
                    newPath = currentPath.replace(pathMap.en, pathMap.zh);
                    break;
                }
            }
        } else {
            // 当前是中文页，目标是切换到英文
            for (const pathMap of translatablePaths) {
                if (typeof pathMap.zh === 'string' && currentPath === pathMap.zh) {
                    newPath = pathMap.en;
                    break;
                } else if (pathMap.zh instanceof RegExp && pathMap.zh.test(currentPath)) {
                    newPath = currentPath.replace(pathMap.zh, pathMap.en);
                    break;
                }
            }
        }

        // 如果路径发生变化，则跳转
        if (newPath !== currentPath) {
            // 保留查询参数 (特别是对于搜索结果页)
            window.location.href = newPath + window.location.search;
        }
    }

    // 初始化主题和语言状态 (与base.html一致)
    document.addEventListener("DOMContentLoaded", function() {
        // 主题初始化
        const savedTheme = localStorage.getItem('theme') || 'light';
        document.documentElement.setAttribute('data-bs-theme', savedTheme);
        document.getElementById('theme-icon').className = savedTheme === 'dark' ? 'bi bi-moon-fill' : 'bi bi-sun-fill';

        // 语言切换按钮文本初始化
        const languageToggleBtn = document.querySelector(".language-toggle");
        const currentPath = window.location.pathname;
        const isEnglishPage = currentPath.includes('_en/');
        
        if (languageToggleBtn) {
            if (isEnglishPage) {
                languageToggleBtn.innerHTML = "<i class=\"bi bi-translate me-1\"></i>中文";
            } else {
                languageToggleBtn.innerHTML = "<i class=\"bi bi-translate me-1\"></i>English";
            }
        }
    });
        
        // Loading animation
        function showLoading() {
            const loadingHtml = `
                <div class="loading-overlay">
                    <div class="text-center">
                        <div class="spinner-border mb-3" role="status" style="width: 3rem; height: 3rem;">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <div>Processing your request...</div>
                    </div>
                </div>
            `;
            document.body.insertAdjacentHTML('beforeend', loadingHtml);
        }
        
        function hideLoading() {
            const loading = document.querySelector('.loading-overlay');
            if (loading) {
                loading.remove();
            }
        }
        
        // Image preview function
        function previewImage(src, title) {
            const modal = new bootstrap.Modal(document.getElementById('imageModal') || createImageModal());
            document.getElementById('modalImage').src = src;
            document.getElementById('modalTitle').textContent = title || 'Image Preview';
            modal.show();
        }
        
        function createImageModal() {
            const modalHtml = `
                <div class="modal fade" id="imageModal" tabindex="-1">
                    <div class="modal-dialog modal-lg modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="modalTitle">Image Preview</h5>
                                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                            </div>
                            <div class="modal-body text-center">
                                <img id="modalImage" class="img-fluid" style="max-height: 70vh;">
                            </div>
                        </div>
                    </div>
                </div>
            `;
            document.body.insertAdjacentHTML('beforeend', modalHtml);
            return document.getElementById('imageModal');
        }
        
        // Show loading animation on form submit
        document.addEventListener('DOMContentLoaded', function() {
            const forms = document.querySelectorAll('form');
            forms.forEach(form => {
                form.addEventListener('submit', function() {
                    showLoading();
                });
            });
        });
		
		// Automatically obtain the current year
		const currentYear = new Date().getFullYear();
		document.getElementById('current-year-end').textContent = currentYear;

        // User info card functionality
        document.addEventListener("DOMContentLoaded", function() {
            const userInfoButton = document.getElementById('user-info-button');
            const userInfoCard = document.getElementById('user-info-card');
            let userProfileData = null;

            if (userInfoButton && userInfoCard) {
                // Mouse hover to show card
                userInfoButton.addEventListener('mouseenter', function(event) {
                    event.preventDefault(); // Prevent default link behavior
                    // Fetch latest data on each hover
                    fetchUserProfileData();
                    userInfoCard.classList.add('show');
                });

                // Mouse leave button with delay to hide card
                userInfoButton.addEventListener('mouseleave', function(event) {
                    setTimeout(function() {
                        if (!userInfoCard.matches(':hover') && !userInfoButton.matches(':hover')) {
                            userInfoCard.classList.remove('show');
                        }
                    }, 100);
                });

                // Mouse enter card to keep showing
                userInfoCard.addEventListener('mouseenter', function(event) {
                    userInfoCard.classList.add('show');
                });

                // Mouse leave card to hide
                userInfoCard.addEventListener('mouseleave', function(event) {
                    userInfoCard.classList.remove('show');
                });

                // Define function to fetch user data
                function fetchUserProfileData() {
                    fetch("/api/user_profile_data/?days=1")
                        .then(response => response.json())
                        .then(data => {
                            userProfileData = data;
                            updateUserInfoCard(data);
                        })
                        .catch(error => {
                            console.error('Failed to get user info:', error);
                            updateUserInfoCard({
                                created_by: "Failed to load",
                                password_expiry_date: "Failed to load",
                                max_daily_download_gb: "N/A",
                                max_daily_download_count: "N/A",
                                daily_download_count: "N/A",
                                daily_download_size_mb: "N/A"
                            });
                        });
                }

                // Initialize data fetch (optional, since we fetch on each hover now)
                fetchUserProfileData();
            }

            // Update user info card content
            function updateUserInfoCard(data) {
                document.getElementById('created-by').textContent = data.created_by || "N/A";
                
                // Handle password expiry time, show appropriate text if permanent
                let passwordExpiryText = data.password_expiry_date || "N/A";
                if (passwordExpiryText === "永久有效" || passwordExpiryText === "Permanent") {
                    passwordExpiryText = "Permanent";
                }
                document.getElementById('password-expiry').textContent = passwordExpiryText;
                
                document.getElementById('download-limit').textContent = `${data.max_daily_download_gb}GB/${data.max_daily_download_count} files/day`;
                document.getElementById('daily-downloads').textContent = `${data.daily_download_count} files`;
                document.getElementById('daily-download-size').textContent = `${(data.daily_download_size_mb / 1024).toFixed(2)}GB`;
            }
        });
    </script>
    
    {% block extra_js %}{% endblock %}
</body>
</html>

